<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/jquery-1.11.1.js"></script>
        <style>
            button{
                width: 100px;
                height: 60px;
                background-color: #e0e0e0;
                border: none;
            }
            div{
                width: 500px;
                height: 400px;
                background-color: yellow;
                line-height: 400px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <button class="a">tab01</button>
        <button class="b">tab02</button>
        <button class="c">tab03</button>
        <div>tab文字内容一</div>
        <script>
            $(".a").click(function(){
                $(".a").css("background-color","yellow");
                $("div").text("tab文字内容一");
                $(".b").css("background-color","#e0e0e0")
                $(".c").css("background-color","#e0e0e0")
            });
            $(".b").click(function(){
                $(".b").css("background-color","yellow");
                $("div").text("tab文字内容二");
                $(".a").css("background-color","#e0e0e0")
                $(".c").css("background-color","#e0e0e0")
            });
            $(".c").click(function(){
                $(".c").css("background-color","yellow");
                $("div").text("tab文字内容三");
                $(".a").css("background-color","#e0e0e0")
                $(".b").css("background-color","#e0e0e0")
            });
        </script>
    </body>
</html>